<%--
  Created by IntelliJ IDEA.
  User: parttime
  Date: 2017/8/19
  Time: 下午16:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="resources.jsp" %>


<html>
<head>
    <title>充值记录</title>
</head>
<body>
<div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">查询条件</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <%--<label for="nick_name">昵称：</label>--%>
                    <input type="text" class="form-control" id="nick_name" name="nick_name"  placeholder="昵称">
                </div>
                <div class="form-group">
                    <%--<label for="order_no">订单号：</label>--%>
                    <input type="text" class="form-control" id="order_no" name="order_no" placeholder="订单号">
                </div>
                <div class="form-group">
                    <%--<label for="recharge_type">充值方式：</label>--%>
                    <select id="recharge_type" name="recharge_type" class="form-control">
                        <option value = "">充值方式</option>
                        <option value ="1">微信</option>
                        <option value ="2">支付宝</option>
                    </select>
                </div>
                <div class="form-group">
                    <%--<label for="status">状态：</label>--%>
                    <select id="status" name="status" class="form-control">
                        <option value = "">充值状态</option>
                        <option value ="0">充值失败</option>
                        <option value ="1">充值成功</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-info btn-search">查询</button>
                    <button type="button" class="btn btn-reset btn-default">清空</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="ems_table_content">
    <div class="panel panel-default">
        <div class="panel-heading">充值记录</div>
        <div id="toolbar">
            <div class="form-inline" role="form">
                <%--<button type="button" id="rechargerecord_add" class="btn btn-outline btn-success">--%>
                    <%--<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>--%>
                    <%--添加--%>
                <%--</button>--%>
                <%--<button type="button" id="rechargerecord_modify" class="btn btn-outline btn-primary">--%>
                    <%--<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>--%>
                    <%--修改--%>
                <%--</button>--%>
                <%--<button type="button" id="rechargerecord_delete" class="btn btn-outline btn-danger">--%>
                    <%--<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>--%>
                    <%--删除--%>
                <%--</button>--%>
            </div>
        </div>
        <table id="rechargeRecordTable"
               data-url="/ems/rechargerecord/pagination"
               data-show-export="true">
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="nick_name">昵称</th>
                <th data-field="order_no">订单号</th>
                <th data-field="amount" >金额</th>
                <th data-field="recharge_type" data-formatter="rechargeTypeFormat" >充值方式</th>
                <th data-field="recharge_time">充值时间</th>
                <th data-field="status" data-formatter="statusFormat">状态</th>
            </tr>
            </thead>

        </table>
    </div>
</div>

<script>
    $(function () {
        $("#rechargeRecordTable").bootstrapTable(
            {
                showColumns: true,
                showRefresh: true,
                showToggle: true,
                search: true,
                sidePagination: "server",
                pagination: true,
                clickToSelect: true,
                pageList: [5, 10, 20, 50, 100, 200],
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                paginationFirstText: "首页",
                paginationLastText: "尾页",
                toolbar: "#toolbar",

                onPostHeader: function () {
                    $("th").css({"background-color": "#f5f5f5"});
                }
            }
        )

        //搜索
        $("#btn-search").on("click",function () {
            search(getQueryParams());
        });
    })

</script>


<script>
    function statusFormat(srcValue) {
        if (srcValue == 0) {
            return "<span style='color: red;font-weight: bold' >充值失败</span>";
        }else if(srcValue == 1) {
            return "<span style='color: #3cb371;font-weight: bold'>充值成功</span>";
        }
    }

    function rechargeTypeFormat(srcValue) {
        if (srcValue == 1) {
            return "<span style='color: #0dce4e;font-weight: bold' >微信</span>";
        }else if(srcValue == 2) {
            return "<span style='color: #1945b3;font-weight: bold'>支付宝</span>";
        }
    }

    function search(params) {
        var queryParams = {"query":params};
        $('#rechargeRecordTable').bootstrapTable('refresh', queryParams);
    }

</script>

</body>
</html>
